<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        position: relative;
        width: 100%;
        background: url("images/0.jpg");
        background-attachment: fixed;
        background-position: -50px 0;
        background-size: 120% 100%;
      }

      ul,
      ol,
      li {
        list-style: none;
      }

      .web {
        position: fixed;
        top: -127px;
        left: 0;
        width: 100%;
        height: 127px;
        line-height: 127px;
        text-align: center;
        /* border: 1px solid #ddd; */
        background: rgba(255, 255, 255, 0.86);
        transition: all 1s ease;
      }

      .web ul {
        width: 928px;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
      }

      .web ul li {
        position: relative;
        width: 138px;
        height: 76px;
        float: left;
        margin-right: 20px;
      }

      .web ul li:last-child {
        margin-right: 0;
      }

      .web ul li img {
        width: 138px;
        height: 76px;
      }

      .tips {
        width: 30px;
        height: 30px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: url("images/tips.png") -94px -4px;
      }

      .button {
        width: 36px;
        height: 56px;
        position: absolute;
        top: 0;
        left: 20px;
        background: url("images/button.png");
        z-index: 10;
      }
    </style>
  </head>

  <body>
    <div class="button" id="toggle"></div>
    <div class="web" id="web">
      <ul id="nav-list">
        <li>
          <!-- <span class="tips"></span> -->
          <img src="images/0.jpg" />
        </li>
        <li><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
      </ul>
    </div>

    <!-- 1. 引入jquery库 -->
    <script src="./libs/jquery.js"></script>
    <script>
      // 等待页面的 DOM 加载完毕之后再执行
      $(function () {
        // console.log(1)
        // 创建一个DOM元素
        var tips = '<span class="tips"></span>';

        var lis = $("#nav-list li");
        var count = 0;
        var flag = true;
        // console.log(lis)
        // 给所有的li 添加一个 tips  并隐藏
        lis.append(tips).find(".tips").hide();
        // 找到第一个元素并显示
        lis.eq(0).find(".tips").show();

        // 事件触发
        // 事件源.事件的类型(事件的处理函数)
        lis.click(function () {
          // $(this) 表示点击的当前元素
          // console.log($(this).index())
          // lis.eq()
          // 保存当前点击的下标
          var index = $(this).index();
          count = index;
          // console.log(lis.eq(index).find('.tips').show().parent())
          // 点击具体的元素 然后添加 tips 并查找兄弟元素 带有tips的 都隐藏
          lis.eq(index).append(tips).siblings().find(".tips").remove();
          show(index);
        });

        function show(index) {
          $("body").css({
            "background-image": "url(./images/" + index + ".jpg)",
          });
        }

        // 鼠标悬浮的时候
        lis.mouseover(function () {
          var index = $(this).index();
          show(index);
        });

        // 鼠标离开的时候
        lis.mouseout(function () {
          show(count);
        });

        $("#toggle").click(function () {
          $("#web").css({
            top: getTop(),
          });
          flag = !flag;
        });

        function getTop() {
          return flag ? "0" : "-127px";
        }
      });
    </script>
  </body>
</html>
